<!--
1. 添加动画效果也是用transition标签
2. 我们可以通过mode设置动画效果

-->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .v-enter, .v-leave-to{
            opacity: 0;
            transform: translateX(100px);
        }
        .v-enter-active, .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
    </div>
    <script>

        Vue.component('login',{
            template:"<h3>登录页面</h3>"
        });

        Vue.component('register',{
            template: "<h3>注册页面</h3>"
        });


        var vm=new Vue({
            el: "#app",
            data:{
                comName:'login'
            },
            methods:{

            }
        })
    </script>
</body>
</html>